<template>
	<view class="center">
		<view class="logo" @click="goLogin" :hover-class="!login ? 'logo-hover' : ''">
			<image class="logo-img" :src="login ? uerInfo.avatar : '/static/missing-face.png'"></image>
			<view class="logo-title">
				<text class="uer-name">{{login ? uerInfo.nickname : 'Hi，未登录'}}</text>
				<text class="go-login navigat-arrow" v-if="!login">&#xe65e;</text>
			</view>
		</view>
		<view class="center-list">
			<view @click="$util.auth('/pages/user/yuyue')" class="center-list-item border-bottom" hover-class="item-hover">
				<image class="list-icon" src="../../static/zaixianyuyue.png" mode=""></image>
				<text class="list-text">康养预约</text>
				<text class="navigat-arrow">&#xe65e;</text>
			</view>
			<view @click="$util.auth('/pages/user/message')" class="center-list-item border-bottom" hover-class="item-hover">
				<image class="list-icon" src="../../static/liuyan-copy.png" mode=""></image>
				<text class="list-text">留言咨询</text>
				<text class="navigat-arrow">&#xe65e;</text>
			</view>
			<view @click="$util.auth('/pages/user/archives_list')" class="center-list-item" hover-class="item-hover">
				<image class="list-icon" src="../../static/liuyan-copy.png" mode=""></image>
				<text class="list-text">健康档案</text>
				<text class="navigat-arrow">&#xe65e;</text>
			</view>
		</view>
		<view class="center-list" v-if="uerInfo.type == 1">
			<view @click="$util.auth('/pages/user/admin_yuyue')" class="center-list-item border-bottom" hover-class="item-hover">
				<image class="list-icon" src="../../static/zaixianyuyue.png" mode=""></image>
				<text class="list-text">康养预约管理</text>
				<view style="display: flex; align-items: center;">
					<text class="dot" v-if="unreadInfo.yuyue > 0">{{ unreadInfo.yuyue }}</text>
					<text class="navigat-arrow">&#xe65e;</text>
				</view>
			</view>
			<view @click="$util.auth('/pages/user/admin_msg')" class="center-list-item" hover-class="item-hover">
				<image class="list-icon" src="../../static/liuyan-copy.png" mode=""></image>
				<text class="list-text">留言咨询管理</text>
				<view style="display: flex; align-items: center;">
					<text class="dot" v-if="unreadInfo.zixun > 0">{{ unreadInfo.zixun }}</text>
					<text class="navigat-arrow">&#xe65e;</text>
				</view>
			</view>
		</view>
		<view class="center-list" v-if="login">
			<view class="center-list-item" @click="logout" hover-class="item-hover">
				<image class="list-icon" src="../../static/tuichu.png" mode=""></image>
				<text class="list-text">退出登录</text>
				<text class="navigat-arrow">&#xe65e;</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { wechatLogin, logout, UnreadCount } from '../../api/api'
	export default {
		data() {
			return {
				login: false,
				uerInfo: {},
				code: '',
				unreadInfo: {}
			}
		},
		onShow() {
			// #ifdef MP-WEIXIN
			uni.login({
				provider: 'weixin',
				success: (loginRes) => {
					// 获取用户信息
					this.code = loginRes.code
				}
			});
			// #endif
			if (uni.getStorageSync('userInfo')) {
				const user = uni.getStorageSync('userInfo')
				this.login = true
				this.uerInfo.nickname = user.nickname
				this.uerInfo.avatar = user.avatar
				this.uerInfo.type = user.group_id
				this.getUnread()
			}
			
		},
		methods: {
			goLogin() {
				if (!this.login) {
					this.wxLogin()
				} 
			},
			// 微信授权
			wxLogin() {
				// #ifdef MP-WEIXIN
				uni.getUserProfile({
					desc: '授权登录',
					success: (infoRes) => {
						wechatLogin({
							code: this.code,
							encryptedData: infoRes.encryptedData,
							iv: infoRes.iv
						}).then(res => {
							console.log(res)
							if (res.code == 1) {
								uni.setStorageSync('userInfo', res.data)
								this.login = true
								this.uerInfo.nickname = res.data.nickname
								this.uerInfo.avatar = res.data.avatar
								this.uerInfo.type = res.data.group_id
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
							}
						})
					},
					fail: (err) => {
						console.log(err)
						uni.showToast({
							title: '授权失败',
							icon: 'none'
						})
					}
				});
				// #endif
			},
			// 退出登录
			logout () {
				uni.showModal({
				    title: '温馨提示',
				    content: '是否确认退出当前账号?',
				    success: (res) => {
				        if (res.confirm) {
							logout({token: uni.getStorageSync('userInfo').token}).then(result => {
								if (result.code == 1) {
									uni.removeStorageSync('userInfo')
									this.login = false
									this.uerInfo = {}
									// #ifdef MP-WEIXIN
									uni.login({
										provider: 'weixin',
										success: (loginRes) => {
											// 获取用户信息
											this.code = loginRes.code
										}
									});
									// #endif
								} else {
									uni.showToast({
										title: result.msg,
										icon: 'none'
									})
								}
							})
				        } else if (res.cancel) {
				            uni.showToast({
				            	title: '已取消',
								icon: 'none'
				            })
				        }
				    }
				});
			},
			getUnread() {
				UnreadCount({ token: uni.getStorageSync('userInfo').token }).then(res => {
					if (res.code == 1) {
						this.unreadInfo = res.data
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	@font-face {
		font-family: texticons;
		font-weight: normal;
		font-style: normal;
		src: url('https://at.alicdn.com/t/font_984210_5cs13ndgqsn.ttf') format('truetype');
	}

	page,
	view {
		display: flex;
	}

	page {
		background-color: #f7f7f7;
	}

	.center {
		flex-direction: column;
	}

	.logo {
		width: 750upx;
		height: 240upx;
		padding: 20upx;
		box-sizing: border-box;
		background-color: #4caf50;
		flex-direction: row;
		align-items: center;
	}

	.logo-hover {
		opacity: 0.8;
	}
	.item-hover {
		background-color: rgba(0,0,0, .1);
	}
	.logo-img {
		width: 150upx;
		height: 150upx;
		border-radius: 150upx;
		border: 2px solid #fff;
	}

	.logo-title {
		height: 150upx;
		flex: 1;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		margin-left: 20upx;
	}

	.uer-name {
		height: 60upx;
		line-height: 60upx;
		font-size: 38upx;
		color: #FFFFFF;
	}

	.go-login.navigat-arrow {
		font-size: 32upx;
		color: #FFFFFF;
	}

	.login-title {
		height: 150upx;
		align-items: self-start;
		justify-content: center;
		flex-direction: column;
		margin-left: 20upx;
	}

	.center-list {
		background-color: #FFFFFF;
		margin-top: 20upx;
		width: 750upx;
		flex-direction: column;
	}

	.center-list-item {
		display: flex;
		align-items: center;
		height: 100upx;
		width: 750upx;
		box-sizing: border-box;
		flex-direction: row;
		padding: 0upx 20upx;
		.dot {
			display: flex;
			align-items: center;
			justify-content: center;
			min-width: 30rpx;
			height: 30rpx;
			background-color: #FA3534;
			color: #fff;
			border-radius: 50%;
			font-size: 24rpx;
		}
	}

	.border-bottom {
		border-bottom-width: 1upx;
		border-color: #eee;
		border-bottom-style: solid;
	}

	.list-icon {
		width: 60upx;
		height: 60upx;
		font-size: 30upx;
		color: #4cd964;
		text-align: center;
		font-family: texticons;
		margin-right: 20upx;
	}

	.list-text {
		height: 90upx;
		line-height: 90upx;
		font-size: 30upx;
		color: #555;
		flex: 1;
		text-align: left;
	}

	.navigat-arrow {
		height: 90upx;
		width: 40upx;
		line-height: 90upx;
		font-size: 30upx;
		color: #555;
		text-align: right;
		font-family: texticons;
	}
</style>